<template>
	<view class="addInspectTabsContent">
		<view class="upper">
			<commonNavBar title="食品生产经营监督检查要点表"   >
				<template v-slot:right>
					<image src="/static/img/save.png"  @tap="saveImage" style="width: 45rpx;height: 45rpx;"></image>
				</template>
			</commonNavBar> 
			<scroll-view id="content"   :scroll-y="true" :style="{height: contentHeight + 'px'}" >
				<view id="scrrent-page" class="list" >
					<view><text class="check-item">检查企业：{{checkData.companyName}}</text></view>
					<view><text class="check-item">检查部门：{{checkData.deptName}}</text></view>
					<view><text class="check-item">检查时间：{{checkData.checkTime}}</text></view>
					<view><view class="check-item"   v-for="(user ,index) in checkData.flightPlanUserList">检查人员{{index+1}}：{{user.userName}}</view></view>
					<view class="list-item" v-for=" ( stan ,index ) in checkData.flightStandardList">
						<text class="title1">{{stan.serialNum}}.{{stan.name}}</text>
						<view class="title-children" v-for=" ( cont ,conIndex ) in stan.flightContentList">
							<view class="title-content">
								<text class="title2">{{stan.serialNum}}.{{cont.serialNum}} {{cont.checkContent}} </text>
								<text class="result">结果：{{cont.selection | selectionFilter}}</text>
							</view>
							<view class="item-content" v-if="cont.selection == '2'">
								<view>
									<text class="result-dec">{{cont.problemContent}}</text><text
										class="result-dec">{{cont.problemContentInput}}</text>
								</view>
								<view><text class="result-image">查看图片</text></view>
							</view>
							<view class="item-content" v-if="cont.selection == '3'">
								<view><text class="result-dec">{{cont.missingItemContent}}</text><text
										class="result-dec">{{cont.missingItemContentInput}}</text></view>
								<view><text class="result-image">查看图片</text></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<screenshot ref="screenshot" :screenId="'scrrent-page'" @renderFinish="getScreenImg"></screenshot>
	</view>
</template>

<script>
	import longscreen from '@/components/screenShot.vue'
	import commonNavBar from '@/components/CommonNavBar.vue';
	export default {
		components:{
			commonNavBar, 
			'screenshot': longscreen
		},
		data() {
			return { 
				contentHeight:0,
				checkData: {
					standardList: []
				},
				checkId:null
			}
		},
		filters: {
			selectionFilter(value) {

				if (value == '1') {
					return '是'
				} else if (value == '2') {
					return '否'
				} else if (value == '3') {
					return '合理缺项'
				} else {
					return '';
				}

			}
		},
		onLoad(options) {
			this.checkId = options.id
			this.pageHeight = uni.getSystemInfoSync().windowHeight - 80; 
		},
		onReady() {
			const  that = this;
			this.initLoadData(this.checkId);
			uni.createSelectorQuery().in(this).select("#content").fields({rect:true},function(res){
				that.contentHeight = uni.getSystemInfoSync().windowHeight - res.top
			}).exec();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			async initLoadData(checkId) {
				//加载页面所需要数据
				uni.showLoading({
					title:'获取数据中',
					mask: true
				})
				const res = await uni.$api.getFlightCheckInfo({
					checkId: checkId
				})
				if (res.data.code == '1') {
					uni.hideLoading();
					uni.showToast({
						title: '获取信息失败',
						icon: 'error'
					})
					return;
				}
				this.checkData = res.data.data
				uni.hideLoading();
			},
			saveImage() {
				this.$refs.screenshot.startScreen();
			},
			getScreenImg(ret) {
				const that = this;
				//根据传输过来的id 和选中的图片传到后台直接保存 
				uni.showLoading({
					title: '正在生成' ,
					mask: true
				})
				const uploadTask = uni.uploadFile({
					url: '/flightPlan/uploadResultRecord', //仅为示例，非真实的接口地址
					filePath: ret.posterPath,
					name: "imgFile",
					timeout: '10000', //超时时间10秒
					formData: {
						"checkId": that.checkId,
						"type":'1'
					},
					dataType: 'json',
					success: (upRes) => {
						uni.showToast({
							title: '生成完成',
							icon: 'success'
						});
						const result = JSON.parse(upRes.data);
						if( result.code  == '1'){
							uni.showModal({
								content: '保存失败,请重新尝试',
								showCancel: false
							})
						}
						const eventChannel = that.getOpenerEventChannel();
						eventChannel.emit('yaodianbiao', result.data);
						uni.navigateBack();
					},
					fail(err) {
						uni.showModal({
							content: '保存失败,请重新尝试',
							showCancel: false
						})
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.addInspectTabsContent {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);

		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;

			.title {
				background: url('../../static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;
				color: #ffffff;

				.arrow {
					position: absolute;
					left: 33rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 100rpx;
					height: 100rpx;

					&::before {
						display: block;
						content: "";
						position: absolute;
						top: 50%;
						left: 0%;
						width: 20rpx;
						height: 20rpx;
						border-left: 1px solid #fff;
						border-top: 1px solid #fff;
						transform: translate(0%, -50%) rotate(-45deg);
					}
				}

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;
				}

			}
		}
	}
 

	.check-item {
		font-size: 15px;
		color: #424242;
	}

	.list {
		padding: 14px;
		overflow-y: auto;
	}

	.title1 {
		font-size: 15px;
		color: #5d5d5d;
		margin-top: 30px;
	}

	.title-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

	.list-item {
		margin-top: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid #e6e6e6;
	}

	.title-children {
		margin-left: 20px;
		margin-top: 10px;
	}

	.title2 {
		font-size: 15px;
		color: #464646;
		width: 530rpx;
	}

	.result {
		font-size: 13px;
		color: #888888;
		width: 100rpx;
	}

	.result-dec {
		font-size: 13px;
		color: #c2c2c2;
	}

	.result-image {
		margin-left: 30px;
		font-size: 13px;
		color: #1711c2;
	}

	.item-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
</style>